.topHeader {
	position: fixed;
	z-index: 65;
	top: 0;
	left: 0;
	width: 100%;
	height: 56px;
	background-color: #3f51b5;
	.flex {
		display: flex;
		.headerIcon {
			display: block;
			text-decoration: none;
			width: 56px;
	    height: 56px;
	    line-height: 56px;
	    text-align: center;
	    color: #ffffff;
	    cursor: pointer;
		}
		.flexCol {
			flex: 1;
			visibility: hidden;
	    font-weight: 400;
	    line-height: 56px;
	    font-size: 18px;
	    text-align: center;
	    white-space: nowrap;
			color: #ffffff;
		}
		.showTitle {
			visibility: visible;
		}
		.searchWrap {
			display: block;
			position: relative;
    	min-width: 56px;
    	line-height: 56px;
	    text-align: center;
			color: #ffffff;
			.input {
				position: relative;
				height: 36px;
				margin: 10px 10px 0 0;
				border: none;
				outline: none;
				background: transparent;
				color: #fff;
				border-bottom: 2px solid #fff;
				width: 320px;
        opacity: 1;
			}
			.icon {
				cursor: pointer;
			}
			.searchResult {
				position: fixed;
				top: 54px;
				right: 65px;
				z-index: 36;		
				width: 400px;
				max-height: 70%;
				min-height: 10%;
				box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
				overflow-y: auto;
				background: #fff;
				border-radius: 2px;
				.searchList {
					margin: 0 0;
					.searchItem {
						padding: 10px 20px;
						text-align: left;
						cursor: pointer;
						border-bottom: 1px solid #ccc;
						.title {
							color: #3f51b5;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							line-height: 24px;
							text-align: left;
							font-size: 15px;
						}
						.ps {
							color: #727272;
							line-height: 22px;
							span {
								display: inline-block;
								margin-right: 20px;
							}
							time {
								display: inline-block;
					
							}
						}
					}
				}
			}
		}
	}
}

.fixed {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}